@rem:640/750/40rem;
*{margin: 0;padding: 0;box-sizing: border-box;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
html,body,.main{width: 100%;height: 100%;font-family: "微软雅黑";font-size: 28*@rem;}

//@media all and (orientation: portrait) {
//  .spxd{display: none;} 
//}
//@media all and (orientation: landscape) {
//  .spxd {position: fixed;left: 0;top: 0;z-index: 9999;width: 100%;height: 100%;background: url(../images/sjxz.png) #000 center no-repeat;background-size: 30%;} 
//}

.loading{width: 100%;height: 100%;background: #211a4a;background-size: 534*@rem 800*@rem;text-align: center;
    img{width:300*@rem;position: absolute;left: 50%;top: 50%;margin-top: -300/2*@rem;margin-left: -300/2*@rem;}
}


.box{display: none;height: 100%;}
.main{width: 100%;overflow: hidden;display: none;
    .question{width: 594*@rem;margin: -280*@rem 0 0 -(275+48/2)*@rem;position: fixed;left: 50%;top: 50%;z-index: 999;font-size: 28*@rem;color: #fff;display: none;font-weight: bold;
        .q{width: 594*@rem;background: url(../images/titbig.png);background-size: 100% 100%;height: 194*@rem;line-height: 45*@rem;padding: 50*@rem 55*@rem 0;
        }
        .ask{background: url(../images/a0.png);background-size: 100% 100%; width: 594*@rem;height: 134*@rem;line-height: 134*@rem;padding-left: 55*@rem;border: none;font-size: 28*@rem;color: #fff;text-align: left;
            &.current{background: url(../images/a1.png);background-size: 100% 100%;}
        }
    }
    .cover{position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,0.5);left: 0;top: 0;z-index: 990;display: none;}
    
}



.bg{width: 100%;height: 9275*@rem;position: relative;
    .scene{width: 100%;height: 100%;position: absolute;bottom: 0;
        img{width: 100%;float: left;}
        img:nth-child(1){height: 1181*@rem;}
        img:nth-child(2){height: 1012*@rem;}
        img:nth-child(3){height: 1843*@rem;}
        img:nth-child(4){height: 1765*@rem;}
        img:nth-child(5){height: 1680*@rem;}
        img:nth-child(6){height: 1812*@rem;}
    }
    
    .role{width: 153*@rem;height: 384*@rem;position: absolute;z-index: 90;}
    
}

.entrance{width: 100%;height: 100%; background: url(../images/sex.jpg);background-size: 100% auto;position: relative;overflow: hidden;text-align: center;
    img{width: 100%;float: left;position: absolute;top:0;left: 0;}
    .go{background: url(../images/go.png);background-size: 100% auto; width: 299*@rem;height: 84*@rem;position: absolute;bottom: 5%; left: 50%;margin-left: -299/2*@rem;border: none;}
}

.sex{width: 100%;height: 100%;background: url(../images/sex.jpg);background-size: 100% 100%;display: none;
    .sexbox{position: absolute;top: 50%; margin-top: -1067/2*@rem;width: 100%;}
    p{font-size: 38*@rem;color: #5c95b1;text-align: center;line-height: 185*@rem;}
    .man,.woman{width: 334*@rem;margin: 0 auto 60*@rem;text-align: center;
        .ico{width: 334*@rem;height: 334*@rem;}
        span{color: #7ecef4;font-size: 36*@rem;}
    }
    .man{
        .ico{background: url(../images/man.png);background-size: 100% 100%;}
        &.a{
            .ico{background: url(../images/man-a.png);background-size: 100% 100%;}
        }
    }
    .woman{
        .ico{background: url(../images/woman.png);background-size: 100% 100%;}
        &.a{
            .ico{background: url(../images/woman-a.png);background-size: 100% 100%;}
        }
    }
}

.choice-role{float: left; width: 100%;height:100%;min-height: 1334*@rem; background: url(../images/choice-role.jpg) top;background-size: 100% auto;display: none;position: relative;
    .c-box{height: 1334*@rem;position: relative;width: 100%;}
    .hide{display: none;}
    .p{float: left;width: 100%;text-align: center;color: #fff;position: absolute;bottom: 30*@rem;font-size: 36*@rem;}
    .m{
        span:nth-child(1){background-image: url(../images/role/m60.png);
            &.a{background-image: url(../images/role/m61.png);}
        }
        span:nth-child(2){background-image: url(../images/role/m40.png);
            &.a{background-image: url(../images/role/m41.png);}
        }
        span:nth-child(3){background-image: url(../images/role/m50.png);
            &.a{background-image: url(../images/role/m51.png);}
        }
    }
    .w{
        span:nth-child(1){background-image: url(../images/role/w30.png);
            &.a{background-image: url(../images/role/w31.png);}
        }
        span:nth-child(2){background-image: url(../images/role/w10.png);
            &.a{background-image: url(../images/role/w11.png);}
        }
        span:nth-child(3){background-image: url(../images/role/w20.png);
             &.a{background-image: url(../images/role/w21.png);}
        }
    }
    span{width: 173*@rem;height: 567*@rem; position: absolute;background-size: 100% 100%;display: inline-block;}
    span:nth-child(1){left: 337*@rem;bottom: 790*@rem;}
    span:nth-child(2){left: 113*@rem;bottom: 293*@rem;}
    span:nth-child(3){left: 415*@rem;bottom: 105*@rem;}
    
    .name{position: fixed;width: 594*@rem;left: 50%;top: 50%;margin-left: -(594/2)*@rem;margin-top: -134*@rem;display: none;
        input[type=text]{background: url(../images/input.png);background-size: 100% 100%; width: 594*@rem;height: 134*@rem;padding: 55*@rem 83*@rem; line-height: 50*@rem; border: none;font-size: 28*@rem;color: #fff;}
        button{background: url(../images/btn.png);background-size: 100% 100%;width: 294*@rem;height: 134*@rem;color: #fff;font-size: 28*@rem;border: none;}
        button:last-child{float: right;}
    }
    
}

.result{width: 100%;height: 100%;position: relative;left: 0;top: 0;background: url(../images/resultbg.jpg);background-size: 100% auto;display: none;
    .btnbox{width: 100%;text-align: center;margin-top: 45*@rem;
        a{display: inline-block;margin: 0 20*@rem;
            img{height: 78*@rem;}
        }
    }
    .imgbox{width: 658*@rem;height: 980*@rem;margin: 0 auto;overflow: hidden;position: relative;
        .imgs{width: 100%;float: left;}
        p{position: absolute;width: 100%;text-align: center;bottom: 20*@rem;color: #b1b0b0;font-size: 24*@rem;text-shadow:1*@rem 1*@rem 0 #fff;}
    }
    .resultbox{ width: 100%;text-align: center;position: absolute;left: 0;top: 50%;margin-top: -1098/2*@rem;}
    
}

.titles{float: left;width: 100%;height: 100%;display: none;position: relative;overflow: hidden;
    video{width: 100%;height: 100%;}
    #jump{position: absolute;width: 60*@rem;height: 60*@rem;background: rgba(0,0,0,0.5);border-radius: 50*@rem;overflow: hidden;color: #fff;font-size: 24*@rem;line-height: 60*@rem;text-align: center;right: 20*@rem;top: 20*@rem;z-index: 999;}
}

#audioBox{display: none;}
#canvas{width: 750*@rem;height:1334*@rem;position: fixed;z-index: 999;display: none;}
.poster{float: left;width: 100%;height: 1334*@rem;display: none;
    .imgs{width: 750*@rem;height: 1334*@rem;}
}
